<script setup lang="ts">
import { toRefs } from 'vue';
import { api } from '@T2/plugins/env-config.ts';

const props = withDefaults(defineProps<{
  iconFile: string;
  iconSize?: number;
  iconColor?: string;
}>(), {
  iconSize: 24,
});

const { iconFile, iconSize, iconColor } = toRefs(props);
</script>

<template>
  <div
    class="svg-mask-icon"
    :style="{
      '--icon-url': `url(${ api + iconFile })`,
      '--icon-color': iconColor,
      '--icon-size': `${ iconSize }px`,
    }"
  >
  </div>
</template>

<style lang="scss" scoped>
.svg-mask-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  -webkit-mask: var(--icon-url) center center / 100% 100% no-repeat;
  mask: var(--icon-url) center center / 100% 100% no-repeat;
  background-color: var(--icon-color);
}
</style>